<template>
  <a-select
    :allowClear="allowClear"
    :name="name"
    :disabled="props.disabled"
    :value="props.modelValue"
    :placeholder="placeholder || '请选择'"
    @change="updateValue"
    :getPopupContainer="noParentContainer ? null : (trigger: any) => trigger.parentElement"
  >
    <a-select-option
      v-for="item in store.getDict(props.dictCode || '')"
      :key="item.dictCode"
      :value="item.dictCode"
    >
      {{ item.dictName }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useStore } from '../stores'

interface Props {
  name?: string
  dictCode?: string
  placeholder?: string
  modelValue?: any
  allowClear?: boolean
  disabled?: boolean
  noParentContainer?: boolean // popup不依赖于父元素
}
const emit = defineEmits(['update:modelValue', 'select'])
const props = defineProps<Props>()

const { name, placeholder } = reactive(props)
const store = useStore()

function updateValue(e: any): void {
  emit('update:modelValue', e)
  emit('select', e)
}
function select(e: any): void {
  emit('select', e)
}

const dictFilterOption = (input: string, option: any): boolean => {
  return option.dictName.toUpperCase().indexOf(input.toUpperCase()) >= 0
}
</script>

<style lang="less" scoped></style>
